<template>
  <Modal v-model="visible" width="480" title="上传录音" @on-visible-change="closeModal">
    <Form ref="form" :model="form" :rules="rules" :label-width="120">
      <FormItem label="上传人姓名:">
        {{ $dt.userInfo().userName }}
      </FormItem>
      <FormItem label="上传人工号:">
        {{ $dt.userInfo().workNo }}
      </FormItem>
      <FormItem label="上传录音文件:" prop="tapeUrl">
        <template v-if="!form.tapeUrl">
          <Upload ref="upload" name="multipartFile" :action="upload.reqUrl" :headers="upload.headers" :data="upload.data" :show-upload-list="false"
            :on-success="onSuccess"
          >
            <Button icon="ios-cloud-upload-outline">上传文件</Button>
          </Upload>
        </template>
        <div v-else class="audio-content">
          <audio controls>
            <source :src="form.tapeUrl" type="audio/mpeg">
            您的浏览器不支持 audio 元素。
          </audio>
          <span @click="onDelete">删除</span>
        </div>
      </FormItem>
      <FormItem label="备注:">
        <Input v-model="form.remark" :maxlength="300" show-word-limit :rows="4" type="textarea" placeholder="请输入" />
      </FormItem>
    </Form>
    <div slot="footer">
      <Button type="text" @click="onClose">取消</Button>
      <Button type="primary" @click="onConfirm">确定</Button>
    </div>
  </Modal>
</template>

<script>
  import toolMgr from '@/biz/base/tool.js'
  import auditMgr from '@/biz/flowApproval/riskAudit.js'

  export default {
    props: {
      id: [Number, String]
    },
    data() {
      return {
        visible: false,
        form: {
          tapeUrl: '',
          remark: ''
        },
        rules: {
          tapeUrl: [
            { required: true, message: '请选择录音', trigger: 'blur' },
          ],
        },
        upload: toolMgr.unloadImage(),
      }
    },
    methods: {
      onConfirm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            auditMgr.uploadTape({
              orderReviewId: this.id,
              ...this.form
            }).then(() => {
              this.$Message.success('上传成功')
              this.onClose()
              this.$emit('success')
            })
          }
        })
      },
      // 上传成功
      onSuccess(res, file, fileList) {
        if (res.code == '200') {
          this.form.tapeUrl = res.data.imageURL
        } else {
          this.$Message.error(res.msg)
        }
      },
      onDelete() {
        this.form.tapeUrl = ''
        this.$refs.upload.clearFiles()
      },
      onClose() {
        this.visible = false
        this.form = {
          tapeUrl: '',
          remark: ''
        }
      },
      closeModal(res) {
        if (!res) {
          this.$refs.form.resetFields()
        }
      },
    },
  }
</script>

<style lang='scss' scoped>
  .audio-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    audio {
      width: 285px; height: 36px;
    }
    > span {
      color: #3366ff;
      cursor: pointer;
    }
  }
</style>